<template>
    <view class="container">
      <!-- 用户信息区域 -->
      <view class="user-info">
        <image class="avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
        <view class="user-detail">
          <text class="username">用户名称</text>
          <text class="user-id">ID: 888888</text>
        </view>
      </view>
      
      <!-- 功能列表 -->
      <view class="menu-list">
        <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="handleMenuItem(item)">
          <view class="menu-left">
            <image class="menu-icon" :src="item.icon"></image>
            <text class="menu-text">{{ item.text }}</text>
          </view>
          <view class="menu-arrow">></view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        menuItems: [
          {
            icon: '/static/icons/settings.png',
            text: '个人设置',
            path: '/pages/settings/index'
          },
          {
            icon: '/static/icons/history.png',
            text: '历史记录',
            path: '/pages/history/index'
          },
          {
            icon: '/static/icons/about.png',
            text: '关于我们',
            path: '/pages/about/index'
          }
        ]
      }
    },
    methods: {
      handleMenuItem(item) {
        uni.navigateTo({
          url: item.path
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #000;
    padding: 20rpx;
    
    .user-info {
      display: flex;
      align-items: center;
      padding: 40rpx 20rpx;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }
      
      .user-detail {
        .username {
          color: #fff;
          font-size: 36rpx;
          font-weight: bold;
          display: block;
          margin-bottom: 10rpx;
        }
        
        .user-id {
          color: rgba(255,255,255,0.6);
          font-size: 24rpx;
        }
      }
    }
    
    .menu-list {
      margin-top: 40rpx;
      
      .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 20rpx;
        border-bottom: 1rpx solid rgba(255,255,255,0.1);
        
        .menu-left {
          display: flex;
          align-items: center;
          
          .menu-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }
          
          .menu-text {
            color: #fff;
            font-size: 28rpx;
          }
        }
        
        .menu-arrow {
          color: rgba(255,255,255,0.6);
          font-size: 28rpx;
        }
      }
    }
  }
  </style>